<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关键参数监控 - 异烟酸生产收率预测系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="styles/common.css">
    <link rel="stylesheet" href="styles/components.css">
    <link rel="stylesheet" href="styles/main-nav.css">
</head>
<body>
    <div class="app-container">
        <!-- 侧边栏 -->
        <div class="sidebar">
            <div class="logo">
                <img src="img/python-logo.png" alt="Python工业预测模型Logo">
                <span>异烟酸生产收率预测</span>
            </div>
            <nav class="nav-menu">
                <a href="index.html" class="nav-item">
                    <i class="fas fa-home"></i>
                    <span>首页</span>
                </a>
                <a href="qd-display.html" class="nav-item">
                    <i class="fas fa-tachometer-alt"></i>
                    <span>主控面板</span>
                </a>
                <a href="model-value.html" class="nav-item">
                    <i class="fas fa-chart-line"></i>
                    <span>模型应用价值</span>
                </a>
                <a href="system-architecture.html" class="nav-item">
                    <i class="fas fa-project-diagram"></i>
                    <span>系统架构设计</span>
                </a>
                <a href="data-flow.html" class="nav-item">
                    <i class="fas fa-database"></i>
                    <span>数据流设计</span>
                </a>
                <a href="model-deployment.html" class="nav-item">
                    <i class="fas fa-cogs"></i>
                    <span>模型部署与应用</span>
                </a>
                <a href="ui-design.html" class="nav-item">
                    <i class="fas fa-desktop"></i>
                    <span>用户界面设计</span>
                </a>
                <a href="yield-prediction.html" class="nav-item">
                    <i class="fas fa-flask"></i>
                    <span>收率预测</span>
                </a>
                <a href="parameter-monitoring.html" class="nav-item active">
                    <i class="fas fa-eye"></i>
                    <span>关键参数监控</span>
                </a>
                <a href="online-analysis.html" class="nav-item">
                    <i class="fas fa-chart-bar"></i>
                    <span>在线分析</span>
                </a>
                <a href="model-performance.html" class="nav-item">
                    <i class="fas fa-chart-pie"></i>
                    <span>模型性能</span>
                </a>
                <a href="model-details.html" class="nav-item">
                    <i class="fas fa-info-circle"></i>
                    <span>模型详情</span>
                </a>
                <a href="model-update.html" class="nav-item">
                    <i class="fas fa-sync-alt"></i>
                    <span>模型更新</span>
                </a>
                <a href="model-config.html" class="nav-item">
                    <i class="fas fa-sliders-h"></i>
                    <span>系统配置</span>
                </a>
                <a href="documentation.html" class="nav-item">
                    <i class="fas fa-book"></i>
                    <span>技术文档</span>
                </a>
            </nav>
            <div class="sidebar-footer">
                <div class="user-info">
                    <img src="https://cdn-icons-png.flaticon.com/512/1077/1077114.png" alt="User">
                    <span>管理员</span>
                </div>
                <a href="#" class="logout-btn">
                    <i class="fas fa-sign-out-alt"></i>
                </a>
            </div>
        </div>

        <!-- 主内容区 -->
        <div class="main-content">
            <!-- 顶部导航栏 -->
            <header class="top-bar">
                <div class="page-title">
                    <h1>关键参数监控</h1>
                    <p>异烟酸生产过程关键参数实时监控与异常检测</p>
                </div>
                <div class="top-bar-actions">
                    <div class="search-bar">
                        <i class="fas fa-search"></i>
                        <input type="text" placeholder="搜索...">
                    </div>
                    <div class="notification">
                        <i class="far fa-bell"></i>
                        <span class="badge">3</span>
                    </div>
                    <div class="setting">
                        <i class="fas fa-cog"></i>
                    </div>
                </div>
            </header>

            <!-- 内容区域 -->
            <div class="content-wrapper">
                <!-- 顶部导航链接 -->
                <div class="navigation-links">
                    <a href="yield-prediction.html" class="nav-link">收率预测</a>
                    <a href="parameter-monitoring.html" class="nav-link active">关键参数监控</a>
                    <a href="parameter-optimization.html" class="nav-link">参数优化建议</a>
                    <a href="yield-forecast.html" class="nav-link">预警信息</a>
                </div>

                <!-- 二级导航 -->
                <div class="secondary-nav">
                    <a href="#temperature" class="nav-link active">温度参数</a>
                    <a href="#pressure" class="nav-link">压力参数</a>
                    <a href="#ph" class="nav-link">pH值</a>
                    <a href="#catalyst" class="nav-link">催化剂</a>
                    <a href="#flow" class="nav-link">流量参数</a>
                </div>

                <!-- 页面内容 -->
                <div class="page-content">
                    <!-- 参数概览 -->
                    <div class="section-title">参数概览</div>
                    
                    <div class="alert alert-warning">
                        <div class="alert-icon"><i class="fas fa-exclamation-triangle"></i></div>
                        <div>
                            <strong>注意：</strong> 当前检测到 2 个参数异常，请查看详情并及时处理。
                        </div>
                    </div>
                    
                    <div class="parameter-overview">
                        <div class="parameter-grid">
                            <div class="parameter-card normal">
                                <div class="parameter-header">
                                    <div class="parameter-icon">
                                        <i class="fas fa-temperature-high"></i>
                                    </div>
                                    <div class="parameter-status">
                                        <span class="status-dot"></span> 正常
                                    </div>
                                </div>
                                <div class="parameter-name">反应釜温度</div>
                                <div class="parameter-value">138.5°C</div>
                                <div class="parameter-range">正常范围: 135-145°C</div>
                                <div class="parameter-trend">
                                    <i class="fas fa-arrow-up"></i> 0.3°C/h
                                </div>
                            </div>
                            
                            <div class="parameter-card warning">
                                <div class="parameter-header">
                                    <div class="parameter-icon">
                                        <i class="fas fa-tachometer-alt"></i>
                                    </div>
                                    <div class="parameter-status">
                                        <span class="status-dot"></span> 警告
                                    </div>
                                </div>
                                <div class="parameter-name">系统压力</div>
                                <div class="parameter-value">2.8 MPa</div>
                                <div class="parameter-range">正常范围: 2.2-2.6 MPa</div>
                                <div class="parameter-trend">
                                    <i class="fas fa-arrow-up"></i> 0.1 MPa/h
                                </div>
                            </div>
                            
                            <div class="parameter-card normal">
                                <div class="parameter-header">
                                    <div class="parameter-icon">
                                        <i class="fas fa-vial"></i>
                                    </div>
                                    <div class="parameter-status">
                                        <span class="status-dot"></span> 正常
                                    </div>
                                </div>
                                <div class="parameter-name">pH值</div>
                                <div class="parameter-value">6.8</div>
                                <div class="parameter-range">正常范围: 6.5-7.5</div>
                                <div class="parameter-trend">
                                    <i class="fas fa-minus"></i> 稳定
                                </div>
                            </div>
                            
                            <div class="parameter-card danger">
                                <div class="parameter-header">
                                    <div class="parameter-icon">
                                        <i class="fas fa-atom"></i>
                                    </div>
                                    <div class="parameter-status">
                                        <span class="status-dot"></span> 异常
                                    </div>
                                </div>
                                <div class="parameter-name">催化剂活性</div>
                                <div class="parameter-value">78.3%</div>
                                <div class="parameter-range">正常范围: 85-100%</div>
                                <div class="parameter-trend">
                                    <i class="fas fa-arrow-down"></i> -2.1%/h
                                </div>
                            </div>
                            
                            <div class="parameter-card normal">
                                <div class="parameter-header">
                                    <div class="parameter-icon">
                                        <i class="fas fa-water"></i>
                                    </div>
                                    <div class="parameter-status">
                                        <span class="status-dot"></span> 正常
                                    </div>
                                </div>
                                <div class="parameter-name">进料流量</div>
                                <div class="parameter-value">125 L/h</div>
                                <div class="parameter-range">正常范围: 120-130 L/h</div>
                                <div class="parameter-trend">
                                    <i class="fas fa-minus"></i> 稳定
                                </div>
                            </div>
                            
                            <div class="parameter-card normal">
                                <div class="parameter-header">
                                    <div class="parameter-icon">
                                        <i class="fas fa-fan"></i>
                                    </div>
                                    <div class="parameter-status">
                                        <span class="status-dot"></span> 正常
                                    </div>
                                </div>
                                <div class="parameter-name">搅拌速度</div>
                                <div class="parameter-value">180 rpm</div>
                                <div class="parameter-range">正常范围: 160-200 rpm</div>
                                <div class="parameter-trend">
                                    <i class="fas fa-minus"></i> 稳定
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 温度参数详情 -->
                    <div class="section-title" id="temperature">温度参数详情</div>
                    
                    <div class="content-card">
                        <div class="content-card-title">
                            <i class="fas fa-temperature-high"></i>
                            反应釜温度监控
                        </div>
                        
                        <div class="parameter-chart">
                            <img src="https://via.placeholder.com/1000x300?text=反应釜温度趋势图" alt="反应釜温度趋势图" style="width: 100%; height: auto; border-radius: var(--radius); margin-top: 20px;">
                        </div>
                        
                        <div class="parameter-metrics">
                            <div class="metric-item">
                                <div class="metric-icon"><i class="fas fa-thermometer-half"></i></div>
                                <div class="metric-info">
                                    <div class="metric-name">当前温度</div>
                                    <div class="metric-value">138.5°C</div>
                                </div>
                            </div>
                            <div class="metric-item">
                                <div class="metric-icon"><i class="fas fa-chart-line"></i></div>
                                <div class="metric-info">
                                    <div class="metric-name">24小时平均值</div>
                                    <div class="metric-value">137.8°C</div>
                                </div>
                            </div>
                            <div class="metric-item">
                                <div class="metric-icon"><i class="fas fa-arrows-alt-v"></i></div>
                                <div class="metric-info">
                                    <div class="metric-name">波动范围</div>
                                    <div class="metric-value">±1.2°C</div>
                                </div>
                            </div>
                            <div class="metric-item">
                                <div class="metric-icon"><i class="fas fa-exclamation-circle"></i></div>
                                <div class="metric-info">
                                    <div class="metric-name">异常次数(24h)</div>
                                    <div class="metric-value">0次</div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="parameter-details">
                            <div class="detail-section">
                                <h4>温度控制参数</h4>
                                <table class="performance-table">
                                    <thead>
                                        <tr>
                                            <th>参数名称</th>
                                            <th>当前值</th>
                                            <th>目标值</th>
                                            <th>状态</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>加热功率</td>
                                            <td>65%</td>
                                            <td>60-70%</td>
                                            <td><span class="status-normal">正常</span></td>
                                        </tr>
                                        <tr>
                                            <td>冷却水流量</td>
                                            <td>18 L/min</td>
                                            <td>15-25 L/min</td>
                                            <td><span class="status-normal">正常</span></td>
                                        </tr>
                                        <tr>
                                            <td>夹套温度</td>
                                            <td>142.3°C</td>
                                            <td>140-145°C</td>
                                            <td><span class="status-normal">正常</span></td>
                                        </tr>
                                        <tr>
                                            <td>温度均匀度</td>
                                            <td>±0.8°C</td>
                                            <td>≤±1.0°C</td>
                                            <td><span class="status-normal">正常</span></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            
                            <div class="detail-section">
                                <h4>温度稳定性分析</h4>
                                <p>当前反应釜温度处于正常范围内，波动幅度较小，控制稳定。温度稳定性对异烟酸收率影响显著，根据历史数据分析，当温度波动控制在±1.0°C以内时，可提高收率约2.3%。</p>
                                <div class="tags">
                                    <span class="tag"><i class="fas fa-check-circle tag-icon"></i>温度稳定</span>
                                    <span class="tag"><i class="fas fa-check-circle tag-icon"></i>控制良好</span>
                                    <span class="tag"><i class="fas fa-info-circle tag-icon"></i>无需调整</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 压力参数详情 -->
                    <div class="section-title" id="pressure">压力参数详情</div>
                    
                    <div class="content-card">
                        <div class="content-card-title">
                            <i class="fas fa-tachometer-alt"></i>
                            系统压力监控
                        </div>
                        
                        <div class="alert alert-warning">
                            <div class="alert-icon"><i class="fas fa-exclamation-triangle"></i></div>
                            <div>
                                <strong>警告：</strong> 系统压力超出正常范围，建议检查减压阀和安全阀状态，必要时进行手动调节。
                            </div>
                        </div>
                        
                        <div class="parameter-chart">
                            <img src="https://via.placeholder.com/1000x300?text=系统压力趋势图" alt="系统压力趋势图" style="width: 100%; height: auto; border-radius: var(--radius); margin-top: 20px;">
                        </div>
                        
                        <div class="parameter-metrics">
                            <div class="metric-item">
                                <div class="metric-icon"><i class="fas fa-tachometer-alt"></i></div>
                                <div class="metric-info">
                                    <div class="metric-name">当前压力</div>
                                    <div class="metric-value">2.8 MPa</div>
                                </div>
                            </div>
                            <div class="metric-item">
                                <div class="metric-icon"><i class="fas fa-chart-line"></i></div>
                                <div class="metric-info">
                                    <div class="metric-name">24小时平均值</div>
                                    <div class="metric-value">2.5 MPa</div>
                                </div>
                            </div>
                            <div class="metric-item">
                                <div class="metric-icon"><i class="fas fa-arrows-alt-v"></i></div>
                                <div class="metric-info">
                                    <div class="metric-name">波动范围</div>
                                    <div class="metric-value">±0.3 MPa</div>
                                </div>
                            </div>
                            <div class="metric-item">
                                <div class="metric-icon"><i class="fas fa-exclamation-circle"></i></div>
                                <div class="metric-info">
                                    <div class="metric-name">异常次数(24h)</div>
                                    <div class="metric-value">3次</div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="parameter-actions">
                            <button class="btn btn-primary">
                                <i class="fas fa-tools mr-2"></i> 调整压力
                            </button>
                            <button class="btn btn-secondary">
                                <i class="fas fa-history mr-2"></i> 历史数据
                            </button>
                            <button class="btn btn-secondary">
                                <i class="fas fa-bell mr-2"></i> 设置预警
                            </button>
                        </div>
                    </div>
                    
                    <!-- 催化剂活性详情 -->
                    <div class="section-title" id="catalyst">催化剂活性详情</div>
                    
                    <div class="content-card">
                        <div class="content-card-title">
                            <i class="fas fa-atom"></i>
                            催化剂活性监控
                        </div>
                        
                        <div class="alert alert-danger">
                            <div class="alert-icon"><i class="fas fa-exclamation-circle"></i></div>
                            <div>
                                <strong>异常：</strong> 催化剂活性显著低于正常值，建议立即检查催化剂状态并考虑更换或再生处理。
                            </div>
                        </div>
                        
                        <div class="parameter-chart">
                            <img src="https://via.placeholder.com/1000x300?text=催化剂活性趋势图" alt="催化剂活性趋势图" style="width: 100%; height: auto; border-radius: var(--radius); margin-top: 20px;">
                        </div>
                        
                        <div class="parameter-metrics">
                            <div class="metric-item">
                                <div class="metric-icon"><i class="fas fa-atom"></i></div>
                                <div class="metric-info">
                                    <div class="metric-name">当前活性</div>
                                    <div class="metric-value">78.3%</div>
                                </div>
                            </div>
                            <div class="metric-item">
                                <div class="metric-icon"><i class="fas fa-chart-line"></i></div>
                                <div class="metric-info">
                                    <div class="metric-name">初始活性</div>
                                    <div class="metric-value">98.5%</div>
                                </div>
                            </div>
                            <div class="metric-item">
                                <div class="metric-icon"><i class="fas fa-calendar-alt"></i></div>
                                <div class="metric-info">
                                    <div class="metric-name">使用时间</div>
                                    <div class="metric-value">168小时</div>
                                </div>
                            </div>
                            <div class="metric-item">
                                <div class="metric-icon"><i class="fas fa-hourglass-half"></i></div>
                                <div class="metric-info">
                                    <div class="metric-name">预计剩余寿命</div>
                                    <div class="metric-value">24小时</div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="parameter-actions">
                            <button class="btn btn-danger">
                                <i class="fas fa-sync-alt mr-2"></i> 更换催化剂
                            </button>
                            <button class="btn btn-warning">
                                <i class="fas fa-recycle mr-2"></i> 催化剂再生
                            </button>
                            <button class="btn btn-secondary">
                                <i class="fas fa-history mr-2"></i> 历史数据
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- JavaScript引用 -->
    <script src="scripts/common.js"></script>
    <script src="scripts/main-nav.js"></script>
    
    <style>
        /* 参数监控页面特有样式 */
        .parameter-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 20px;
            margin: 20px 0;
        }
        
        .parameter-card {
            background-color: #fff;
            border-radius: var(--radius);
            padding: 20px;
            box-shadow: var(--shadow-sm);
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
            border-left: 4px solid transparent;
        }
        
        .parameter-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow);
        }
        
        .parameter-card.normal {
            border-left-color: var(--success);
        }
        
        .parameter-card.warning {
            border-left-color: var(--warning);
        }
        
        .parameter-card.danger {
            border-left-color: var(--danger);
        }
        
        .parameter-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
        }
        
        .parameter-icon {
            width: 40px;
            height: 40px;
            background: var(--primary-gradient);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 18px;
            box-shadow: 0 4px 10px rgba(52, 152, 219, 0.2);
        }
        
        .parameter-status {
            display: flex;
            align-items: center;
            font-size: 14px;
            font-weight: 500;
        }
        
        .status-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 6px;
        }
        
        .normal .status-dot {
            background-color: var(--success);
            box-shadow: 0 0 5px var(--success);
        }
        
        .warning .status-dot {
            background-color: var(--warning);
            box-shadow: 0 0 5px var(--warning);
        }
        
        .danger .status-dot {
            background-color: var(--danger);
            box-shadow: 0 0 5px var(--danger);
            animation: pulse 1.5s infinite;
        }
        
        .normal .parameter-status {
            color: var(--success);
        }
        
        .warning .parameter-status {
            color: var(--warning);
        }
        
        .danger .parameter-status {
            color: var(--danger);
        }
        
        .parameter-name {
            font-size: 14px;
            color: var(--gray);
            margin-bottom: 5px;
        }
        
        .parameter-value {
            font-size: 24px;
            font-weight: 700;
            color: var(--primary-dark);
            margin-bottom: 5px;
        }
        
        .parameter-range {
            font-size: 12px;
            color: var(--gray);
            margin-bottom: 10px;
        }
        
        .parameter-trend {
            font-size: 14px;
            font-weight: 500;
            color: var(--gray);
        }
        
        .normal .parameter-trend i.fa-arrow-up,
        .normal .parameter-trend i.fa-arrow-down {
            color: var(--primary);
        }
        
        .warning .parameter-trend i.fa-arrow-up {
            color: var(--warning);
        }
        
        .danger .parameter-trend i.fa-arrow-down {
            color: var(--danger);
        }
        
        .parameter-details {
            margin-top: 30px;
        }
        
        .detail-section {
            margin-bottom: 20px;
        }
        
        .detail-section h4 {
            font-size: 16px;
            font-weight: 600;
            color: var(--primary-dark);
            margin-bottom: 15px;
        }
        
        .status-normal {
            color: var(--success);
            font-weight: 500;
        }
        
        .status-warning {
            color: var(--warning);
            font-weight: 500;
        }
        
        .status-danger {
            color: var(--danger);
            font-weight: 500;
        }
        
        .parameter-actions {
            margin-top: 20px;
            display: flex;
            gap: 10px;
        }
        
        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7);
            }
            70% {
                box-shadow: 0 0 0 8px rgba(231, 76, 60, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(231, 76, 60, 0);
            }
        }
        
        @media (max-width: 768px) {
            .parameter-grid {
                grid-template-columns: 1fr;
            }
            
            .parameter-metrics {
                flex-direction: column;
            }
            
            .metric-item {
                width: 100%;
            }
        }
    </style>
</body>
</html> 